<template>
  <div>
    <BackHeader backname="入库单">
      <div class="main_table marginTop10" style="min-height: 500px">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
        >
          <el-table-column label="入库单号" prop="">
            <template slot-scope="scope">{{ scope.row.order_sn }}</template>
          </el-table-column>
          <el-table-column label="入库金额" prop="">
            <template slot-scope="scope">{{ scope.row.money }}</template>
          </el-table-column>
          <el-table-column label="入库状态" prop="">
            <template slot-scope="scope"
              ><span :class="'status' + scope.row.status">
                {{ status_list[scope.row.status] }}</span
              ></template
            >
          </el-table-column>

          <el-table-column label="入库时间" prop="related_order_sn">
            <template slot-scope="scope">{{
              parseTime(scope.row.created_at)
            }}</template>
          </el-table-column>
          <el-table-column
            label="管理操作"
            align="center"
            prop="related_order_sn"
          >
            <template slot-scope="scope">
              <router-link
                :to="'/purchasing/purchase/entry_see/' + scope.row.id"
              >
                <el-link type="success">查看</el-link>
              </router-link>
              <el-link
                v-if="scope.row.status == 0"
                @click="handleAdjust(scope.row.id)"
                >调整</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_page boxdq">
        <div></div>
        <!-- <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div> -->
      </div>
      <div class="dialog">
        <el-dialog
          title="入库调整"
          :visible.sync="adjustDiaVisible"
          class="main_dialog dialog1000"
          @close="closeDialog"
        >
          <div class="mainor_form">
            <el-form
              :inline="true"
              :model="adjust_form"
              class="demo-form-inline"
              ref="diaRefForm"
              label-width="70px"
              style="width: 100%"
            >
              <el-form-item label="" prop="uid">
                <el-autocomplete
                  v-model="adjust_form.value"
                  ref="searchSelect"
                  class="wid240 main_comm"
                  :fetch-suggestions="
                    (queryString, cb) => {
                      querySearchAsync(queryString, cb);
                    }
                  "
                  placeholder="商品/助记码/编码"
                  clearable
                  :highlight-first-item="true"
                  value-key="name"
                  @select="
                    (item) => {
                      handleSelect(item);
                    }
                  "
                >
                  <template slot-scope="{ item }">
                    <div class="main_name">
                      <span>
                        {{ item.name }}
                      </span>
                    </div>
                  </template>
                </el-autocomplete>
              </el-form-item>
              <el-form-item>
                <!-- <el-button
                  type="primary"
                  @click="handleSelect"
                  :loading="dia_listLoading"
                  >确认回车</el-button
                > -->
              </el-form-item>
            </el-form>
          </div>

          <div class="main_table" style="min-height: 400px">
            <el-table
              ref="multipleTable"
              :data="adjust_table_list"
              element-loading-text="加载中"
              fit
              border
              highlight-current-row
            >
              <el-table-column label="序号" show-overflow-tooltip width="60">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                label="商品名称"
                align="center"
                prop="name"
                show-overflow-tooltip
                min-width="120"
              />
              <el-table-column
                label="数量"
                align="center"
                prop="mobile"
                show-overflow-tooltip
                min-width="120"
              >
                <template slot-scope="scope">
                  <el-input-number
                    v-model.trim="scope.row.num"
                    @change="numChange(scope.row, 1)"
                    :min="0"
                    :precision="2"
                    :controls="false"
                  ></el-input-number> </template
              ></el-table-column>
              <el-table-column
                label="单价"
                align="center"
                prop="count"
                show-overflow-tooltip
                min-width="120"
              >
                <template slot-scope="scope">
                  <el-input-number
                    v-model.trim="scope.row.price"
                    @change="numChange(scope.row, 2)"
                    :min="0"
                    :precision="2"
                    :controls="false"
                  ></el-input-number> </template
              ></el-table-column>
              <el-table-column
                label="小计"
                align="center"
                prop="get_time"
                show-overflow-tooltip
                min-width="180"
              >
                <template slot-scope="scope">
                  <el-input-number
                    v-model.trim="scope.row.money"
                    @change="numChange(scope.row, 3)"
                    :min="0"
                    :precision="2"
                    :controls="false"
                  ></el-input-number> </template
              ></el-table-column>
              <el-table-column
                label="备注"
                align="center"
                prop="name"
                show-overflow-tooltip
                min-width="120"
              >
                <template slot-scope="scope">
                  <el-input v-model.trim="scope.row.remark"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="main_page boxdq"></div>
          <div slot="footer">
            <el-button @click="adjustDiaVisible = false">取 消</el-button>
            <el-button
              type="primary"
              :disabled="adjust_table_list.length == 0"
              :loading="save_btn_loading"
              @click="preserve"
              v-repeatClick
              >保存</el-button
            >
          </div>
        </el-dialog>
      </div>
    </BackHeader>
  </div>
</template>


<script>
import BackHeader from "@/components/OrderSeePage/backHeader.vue";
import { parseTime } from "@/utils/index.js";
import {
  purchase_storageList,
  purchase_adjust,
  storage_info,
} from "@/api/purchasing/purchasingPurchase";
export default {
  name: "",
  components: {
    BackHeader,
  },
  data() {
    return {
      parseTime,
      auto_calculate_entry_purchase: 0,
      id: "",
      list: [],
      status_list: [],
      listLoading: false,
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      adjustDiaVisible: false,
      adjust_form: {},
      dia_listLoading: false,
      save_btn_loading: false,
      adjust_list: [],
      adjust_table_list: [],
      storage_id: "",
    };
  },
  created() {
    if (this.$route.params) {
      this.id = this.$route.params.id;
    }
    this.purchase_storageList();
  },
  methods: {
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
    },
    changePage(page) {
      this.current.page = page;
    },
    // 列表信息
    purchase_storageList() {
      let data = {
        id: this.id,
      };
      this.listLoading = true;
      purchase_storageList(data).then((res) => {
        if (res.errcode == 0) {
          this.auto_calculate_entry_purchase =
            res.data.auto_calculate_entry_purchase;
          this.list = res.data.list;
          this.status_list = res.data.status_list;
        } else {
          this.$message.error(res.errmsg);
        }
        this.listLoading = false;
      });
    },
    handleAdjust(id) {
      let data = { id: id };
      this.storage_id = id;
      this.adjustDiaVisible = true;
      this.dia_listLoading = true;
      storage_info(data).then((res) => {
        if (res.errcode == 0) {
          res.data.info.storage_list.map((e) => {
            e.name = e.goods.name;
            e.goods_spu_code = e.goods_spu.goods_spu_code;
            e.pinyin = e.goods.pinyin;
            e.unit = "";
            if (e.goods_spu && e.goods_spu.spu_name) {
              e.name = `${e.name}【${e.goods_spu.spu_name.title}】`;
            }
            if (e.goods_spu && e.goods_spu.spu_unit) {
              e.unit = e.goods_spu.spu_unit.title;
            }
          });
          this.adjust_list = res.data.info.storage_list;
          this.dia_listLoading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    numChange(row, type) {
      switch (type) {
        case 1:
        case 2:
          row.money = parseFloat(this.$toFixed(row.num * row.price));
          break;
        case 3:
          if (this.auto_calculate_entry_purchase == 0) {
            row.price = parseFloat(this.$toFixed(row.money / row.num));
          }
          break;
      }
    },
    handleSelect(item) {
      let flag = false;
      if (!item) {
        return;
      }
      this.adjust_table_list.map((e) => {
        if (e.goods_spu_id == item.goods_spu_id) {
          flag = true;
        }
      });

      flag ? "" : this.adjust_table_list.push(item);
      this.adjust_form.value = "";
    },
    querySearchAsync(queryString, cb) {
      var adjust_list = this.adjust_list;

      var results = queryString
        ? this.createFilter(queryString, adjust_list)
        : adjust_list;
      cb(results);
    },
    createFilter(queryString, adjust_list) {
      let arr = [];
      queryString = String(queryString);

      arr = adjust_list.filter((e) => {
        if (
          e.name.includes(queryString) ||
          e.goods_spu_code.includes(queryString) ||
          e.pinyin.toLocaleLowerCase().includes(queryString.toLocaleLowerCase())
        ) {
          return e;
        }
      });
      return arr;
    },
    closeDialog() {
      this.adjust_form = {};
      this.adjust_list = [];
      this.adjust_table_list = [];
    },
    // 保存
    preserve() {
      this.save_btn_loading = true;
      this.$confirm("保存后同步修改入库单相关数据, 确定吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let list = [];
          this.adjust_table_list.map((e) => {
            list.push({
              id: e.id,
              goods_spu_id: e.goods_spu_id,
              num: e.num,
              price: e.price,
              money: e.money,
              remark: e.remark,
            });
          });
          let data = {
            id: this.storage_id,
            list: JSON.stringify(list),
          };
          purchase_adjust(data).then((res) => {
            if (res.errcode == 0) {
              this.$message.success("调整成功");
              this.adjustDiaVisible = false;
            } else {
              this.$message.error(res.errmsg);
            }
            this.save_btn_loading = false;
          });
        })
        .catch(() => {
          this.save_btn_loading = false;
        });
    },
  },
};
</script>
<style lang='scss' scoped>
/deep/ .main_table .el-table--small td .cell {
  height: auto;
  white-space: normal !important;
  p {
    margin: 0 5px;
    background-color: #f0f9eb;
    color: #67c23a;
    padding: 2px 0;
  }
  .goods_data_span {
    background-color: #fef0f0;
    color: #f56c6c;
    padding: 2px;
    margin-right: 2px;
    margin-bottom: 5px;
    display: inline-block;
  }
}
.status0 {
  color: #118ab2;
}
.status1 {
  color: #03a98e;
}
.status2 {
  color: #f56c6c;
}
</style>
